<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table 表格滚动友好显示</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<style>
    #main{
        position: relative;
    }
    #main .left{
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
    }
    #main .middle{
        padding-left: 285px;
        padding-right: 100px;
        overflow-y: hidden;
    }
    #main .middle table{
        min-width:1800px;
    }
    #main .right{
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
    }

    #main td div{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width:100px;
    }
</style>
<body>
    <h2>编程语言介绍</h2>

    <div id="main" class="container-fluid">
        <div class="left">
            <table class="table table-bordered table-striped">
                <tr class="success">
                    <th>语言</th>
                    <th>英文</th>
                </tr>
                <tr class="success">
                    <td>超文本预处理器</td>
                    <td title="Hypertext Preprocessor">PHP</td>
                </tr>
            </table>
        </div>

        <div class="middle">
            <table class="table table-bordered">
                <tr>
                    <th>设计者</th>
                    <th>发布日期</th>
                    <th>最佳用途</th>
                    <th>优势</th>
                    <th>最新版本</th>
                </tr>
                <tr>
                    <td title="拉斯马斯·勒德尔夫">Rasmus Lerdorf</td>
                    <td title="首次使用：1995-06-08">1997-11-01</td>
                    <td>网站建设</td>
                    <td title="混合了众多语言的语法，语法简单而富有表现力，开发 WEB 开发最为快速">混合了众多语言的语法，语法简单而富有表现力，开发 WEB 开发最为快速</td>
                    <td title="2020年5月14日">PHP 7.4.6</td>
                </tr>
            </table>
        </div>

        <div class="right">
            <table class="table table-bordered table-striped table-striped">
                <tr class="success">
                    <th>操作</th>
                </tr>
                <tr class="success">
                    <td>
                        <a href="https://www.php.net" target="_blank">进入官网</a>
                    </td>
                </tr>
            </table>
        </div>

    </div>
</body>

</html>